<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-6">
        <h1 class="text-3xl font-bold">飞机大战</h1>
        <p class="text-sm text-gray-600">使用方向键或鼠标移动，空格射击。消灭敌机获取分数。</p>
      </div>

      <div class="bg-white rounded-lg shadow p-4">
        <div class="flex items-center justify-between mb-3">
          <div>分数: <span class="font-medium">{{ score }}</span></div>
          <div class="space-x-2">
            <button class="px-3 py-1 bg-blue-600 text-white rounded" @click="start">开始</button>
            <button class="px-3 py-1 bg-gray-200 rounded" @click="reset">重置</button>
          </div>
        </div>
        <div class="w-full" style="touch-action: none">
          <canvas ref="canvas" class="w-full border rounded" style="height:480px"></canvas>
        </div>
        <div class="text-xs text-gray-500 mt-2">提示：使用 ← → 或 A/D 控制飞机，空格射击（移动鼠标也可控制）</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const canvas = ref(null)
let ctx = null
let raf = 0
let lastShot = 0
let lastSpawn = 0
let running = false

const score = ref(0)
const player = {
  x: 400,
  y: 420,
  w: 40,
  h: 24,
  speed: 6
}

const bullets = []
const enemies = []

function reset() {
  score.value = 0
  bullets.length = 0
  enemies.length = 0
  player.x = 400
  running = false
}

function start() {
  if (!running) {
    running = true
    lastShot = performance.now()
    lastSpawn = performance.now()
    loop()
  }
}

function loop(now) {
  const c = canvas.value
  if (!c) return
  ctx = c.getContext('2d')
  update(now)
  draw()
  if (running) raf = requestAnimationFrame(loop)
}

function update(now = performance.now()) {
  // spawn enemies
  if (now - lastSpawn > 1000) {
    spawnEnemy()
    lastSpawn = now
  }
  // auto shoot
  if (now - lastShot > 300) {
    shoot()
    lastShot = now
  }
  // update bullets
  for (let i = bullets.length - 1; i >= 0; i--) {
    bullets[i].y -= bullets[i].speed
    if (bullets[i].y < -10) bullets.splice(i, 1)
  }
  // update enemies
  for (let i = enemies.length - 1; i >= 0; i--) {
    enemies[i].y += enemies[i].speed
    if (enemies[i].y > canvas.value.height + 20) enemies.splice(i, 1)
  }
  // collisions
  for (let i = enemies.length - 1; i >= 0; i--) {
    const e = enemies[i]
    for (let j = bullets.length - 1; j >= 0; j--) {
      const b = bullets[j]
      if (b.x > e.x - e.w/2 && b.x < e.x + e.w/2 && b.y > e.y - e.h/2 && b.y < e.y + e.h/2) {
        enemies.splice(i,1)
        bullets.splice(j,1)
        score.value += 10
        break
      }
    }
    // enemy hit player
    if (player.x > e.x - e.w/2 - player.w/2 && player.x < e.x + e.w/2 + player.w/2 && player.y > e.y - e.h/2 && player.y < e.y + e.h/2) {
      running = false
    }
  }
}

function draw() {
  const c = canvas.value
  const w = c.width
  const h = c.height
  ctx.fillStyle = '#0ea5e9'
  ctx.fillRect(0,0,w,h)
  // player
  ctx.fillStyle = '#ffffff'
  ctx.fillRect(player.x - player.w/2, player.y - player.h/2, player.w, player.h)
  // bullets
  ctx.fillStyle = '#fffb00'
  bullets.forEach(b => ctx.fillRect(b.x-2,b.y-6,4,8))
  // enemies
  ctx.fillStyle = '#ff6b6b'
  enemies.forEach(e => ctx.fillRect(e.x - e.w/2, e.y - e.h/2, e.w, e.h))
  // if stopped
  if (!running) {
    ctx.fillStyle = 'rgba(0,0,0,0.5)'
    ctx.fillRect(0,0,w,h)
    ctx.fillStyle = '#fff'
    ctx.font = '28px Arial'
    ctx.textAlign = 'center'
    ctx.fillText('游戏已暂停/结束，点击开始或重置', w/2, h/2)
  }
}

function spawnEnemy() {
  const c = canvas.value
  const x = 20 + Math.random() * (c.width - 40)
  enemies.push({ x, y: -20, w: 36, h: 18, speed: 1 + Math.random()*1.5 })
}

function shoot() {
  bullets.push({ x: player.x, y: player.y - 14, speed: 8 })
}

function onKey(e) {
  if (!running) return
  if (e.key === 'ArrowLeft' || e.key === 'a') player.x -= player.speed
  if (e.key === 'ArrowRight' || e.key === 'd') player.x += player.speed
  if (e.key === ' ') shoot()
  clampPlayer()
}

function clampPlayer() {
  const c = canvas.value
  if (!c) return
  player.x = Math.max(player.w/2, Math.min(c.width - player.w/2, player.x))
}

function onMouseMove(e) {
  const rect = canvas.value.getBoundingClientRect()
  player.x = ((e.clientX - rect.left) / rect.width) * canvas.value.width
  clampPlayer()
}

onMounted(() => {
  const c = canvas.value
  c.width = 800
  c.height = 480
  ctx = c.getContext('2d')
  window.addEventListener('keydown', onKey)
  c.addEventListener('mousemove', onMouseMove)
})
onBeforeUnmount(() => {
  cancelAnimationFrame(raf)
  window.removeEventListener('keydown', onKey)
})
</script>

<!-- 无额外组件样式，使用全局 tailwind 工具类 -->
